import { useMemo, useCallback } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import styles from './Layout.module.scss';

const { Header, Content, Sider } = Layout;

export default function MainLayout({ children }) {
  const router = useRouter();

  const selectKey = useMemo(() => {
    return [router.pathname];
  }, [router.pathname]);

  const handleClickMenu = useCallback(({ key }) => {
    router.push(key);
  }, []);

  return (
    <>
      <Head>
        <title>SDN Hub</title>
      </Head>

      <Layout className={styles['sdn-hub-layout']}>
        <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
          <h1 className={styles['sdn-hub-layout-title']}>SDN Hub</h1>
        </Header>
        <Layout style={{ marginTop: 64 }}>
          <Sider
            width={200}
            style={{
              overflow: 'auto',
              height: '100vh',
              position: 'fixed',
              left: 0,
            }}>
            <Menu
              mode="inline"
              selectedKeys={selectKey}
              style={{ height: '100%', borderRight: 0 }}
              onClick={handleClickMenu}>
              <Menu.Item key="/flow" icon={<UserOutlined />}>
                流表
              </Menu.Item>
              {/* <Menu.Item key="3" icon={<NotificationOutlined />}>
                总流量
              </Menu.Item> */}
              <Menu.Item key="/desc" icon={<LaptopOutlined />}>
                表
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout style={{ marginLeft: 200, padding: '0 24px 24px' }}>
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 'calc(100vh - 88px)',
              }}>
              {children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </>
  );
}
